<template>
  <div class="cover-img">
    <img :src="coverImg" alt="" />
    <div>
      <p class="txt-explain">( 尺寸{{ tipsTxt || "400*300" }},小于0.5M )</p>
      <span class="cover-img-title">封面图</span>
      <UploadFile
        :fileType="1"
        :defaultValue="defaultValue"
        @e-fileData="saveFile"
        :disabled="disabled"
        class="cover-img-button"
      />
    </div>
  </div>
</template>
<script>
import webinfo from "@/mixins/webinfo.js";
export default {
  mixins: [webinfo],
  components: {
    UploadFile: () => import("../uploadFile"),
  },
  data() {
    return {
      coverImg: "",
    };
  },
  props: ["defaultValue", "disabled", "type", "tipsTxt"],
  watch: {
    defaultValue(v) {
      this.setImgSrc(v);
    },
  },
  mounted() {
    this.setImgSrc(this.defaultValue);
  },
  methods: {
    setImgSrc(v) {
      if (this.type == 1) {
        //课程库
        this.coverImg = v ? v.httpUrl : this.defaultCourseImg;
      } else if (this.type == 2) {
        //专业库
        this.coverImg = v ? v.httpUrl : this.defaultSpecialtyImg;
      } else if (this.type == 3) {
        //兵种库
        this.coverImg = v ? v.httpUrl : this.defaultArmImg;
      } else if (this.type == 11) {
        //知识点
        this.coverImg = v ? v.httpUrl : this.defaultKnowledgeImg;
      } else if (this.type == 21) {
        //思政点
        this.coverImg = v ? v.httpUrl : this.defaultEducationImg;
      } else {
        this.coverImg = v ? v.httpUrl : this.defaultCourseImg;
      }
    },
    saveFile(v) {
      if (!v.length) return;
      this.coverImg = v[0].httpUrl;
      this.$emit("e-coverImgId", v[0].id);
    },
  },
};
</script>
<style scoped>
.cover-img {
  position: absolute;
  right: 100px;
  top: 0;
  width: 240px;
  height: 165px;
  text-align: center;
  overflow: hidden;
  z-index: 1;
}
.cover-img img {
  margin: 0 auto;
  /* margin-bottom: 10px; */
  width: 150px;
  height: 100px;
  display: block;
  border: 1px solid #eee;
  box-sizing: border-box;
}
.cover-img-title,
.cover-img-button {
  display: inline-block;
  width: 35%;
  height: 34px;
  overflow: hidden;
}
.cover-img-title {
  width: 65%;
}
.cover-img .txt-explain {
  font-size: 12px;
}
</style>